<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/index.css">
<style>
.e1{
	width:500px;
}
img{
    width: 80px;
    height: 80px;
    object-fit: cover;
}

</style>
</head>
<body>
<div id="app">
<el-card class="box-card">
<el-form :inline="true" class="demo-form-inline" class="a1">
            <!-- 输入提示框 -->

    <el-form-item label="商品编号">
        <el-input v-model="assessone.id" placeholder="商品编号"></el-input>
    </el-form-item>

              <el-form-item label="题目">
              <el-row class="demo-autocomplete">
			  <el-col>
			    <el-autocomplete
			      class="inline-input"
			      v-model="assessone.content"
			      :fetch-suggestions="querySearch1"
			      placeholder="请输入内容"
			    ></el-autocomplete>
			  </el-col>
              </el-row>
              </el-form-item>

    <el-form-item label="题目类型">
        <el-select v-model="assessone.types" placeholder="状态">
            <el-option label="所有" value="-1"></el-option>
            <el-option label="填空题" value="填空题"></el-option>
            <el-option label="单选题" value="单选题"></el-option>
            <el-option label="多选题" value="多选题"></el-option>
            <el-option label="判断题" value="判断题"></el-option>
        </el-select>
    </el-form-item>

    <!-- 类别输入提示框 -->
    <el-form-item label="题目类别">
        <el-row class="demo-autocomplete">
            <el-col>
                <el-autocomplete
                        class="inline-input"
                        v-model="assessone.tname"
                        :fetch-suggestions="querySearch"
                        placeholder="请输入内容"
                ></el-autocomplete>
            </el-col>
        </el-row>
    </el-form-item>

    <el-form-item label="题目状态">
        <el-select v-model="assessone.status" placeholder="状态">
            <el-option label="所有" value="2"></el-option>
            <el-option label="待审核" value="0"></el-option>
            <el-option label="同意" value="1"></el-option>
            <el-option label="拒绝" value="-1"></el-option>
        </el-select>
    </el-form-item>
              
              <el-form-item>
              <div class="block">
               <span>时间间</span>
			    <el-date-picker
			    	@change="gettime"
			      v-model="assessone.value1"
			      value-format="yyyy-MM-dd hh:mm:ss"
			      type="daterange"
			      range-separator="至"
			      start-placeholder="开始日期"
			      end-placeholder="结束日期">
			    </el-date-picker>
			  </div>
              </el-form-item>
              
            <el-form-item>
              <el-button type="primary" @click="byassess(1)">查询</el-button>
            </el-form-item>
          </el-form>
          
          <!-- 表格 -->
          <el-table
	      :data="assess.records"
	      border>
              <el-table-column
                      label="题目编号"
                      align="center"
              >
                  <template slot-scope="scope">
                      <span>{{ scope.row.id }}</span>
                  </template>
              </el-table-column>
              <el-table-column
                      label="题目图片"
                      align="center"
              >
                  <template slot-scope="scope">
                      <img style="width: 100px;height: 100px" v-if="scope.row.image != null && scope.row.image?.trim() !== ''" class="i1" :src="scope.row.image">
                  </template>
              </el-table-column>
              <el-table-column
                      label="题目类别"
                      align="center"
              >
                  <template slot-scope="scope">
                      <span>{{ type.find(a=> a.id == scope.row.course)?.tname }}</span>
                  </template>
              </el-table-column>

              <el-table-column
                      label="题目类型"
                      align="center"
              >
                  <template slot-scope="scope">
                      <span>{{ scope.row.type }}</span>
                  </template>
              </el-table-column>

              <el-table-column
                      label="上传时间"
                      align="center"
              >
                  <template slot-scope="scope">
                      <span>{{ formatTimestamp(scope.row.createTime) }}</span>
                  </template>
              </el-table-column>

              <el-table-column
                      label="题目详情"
                      align="center"
              >
                  <template slot-scope="scope">
                      <el-button
                              size="mini"
                              @click="open(scope.row)">查看</el-button>
                  </template>
              </el-table-column>

              <el-table-column
                      label="审核状态"
                      align="center"
              >
                  <template slot-scope="scope">
                      <el-tag v-if="scope.row.status === -1" type="danger">未通过</el-tag>
                      <el-tag v-if="scope.row.status === 0">审核中</el-tag>
                      <el-tag v-if="scope.row.status === 1">通过</el-tag>
                  </template>
              </el-table-column>

              <el-table-column label="操作" align="center" width="160px">
                  <template slot-scope="scope">
                      <el-tag v-if="scope.row.status === 1">通过</el-tag>
                      <el-button v-if="scope.row.status == -1"
                                 size="mini"
                                 class="ban"
                                 @click="took(scope.row)">重新同意</el-button>
                      <el-button v-if="scope.row.status == 0"
                                 size="mini"
                                 @click="took(scope.row)">同意</el-button>
                      <el-button v-if="scope.row.status == 0"
                                 size="mini"
                                 type="danger"
                                 @click="tono(scope.row)">拒绝</el-button>
                  </template>
              </el-table-column>
	    </el-table>
	    
	    <!--页码-->
        <br/>
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination
            @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="currentPage4"
		      :page-sizes="[10,20,30,40,50]"
		      :page-size="pagesize"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
          </el-pagination>
        </div>
        </el-card>

    <!--    弹窗-->
    <el-dialog title="题目详情" :visible.sync="qus">
        <!--        题目显示-->
        <div v-if="one.type == '填空题'">
            {{one.content}}
            <br/><br/>
            <img style="width: 200px;height: 200px" v-if="one.image != null && one.image?.trim() !== ''" class="i1" :src="one.image">
            <br/><br/>
            正确答案：{{formattedCorrectAnswers}}
            <br/><br/>
        </div>
        <div v-if="one.type == '单选题' || one.type == '多选题'">
            {{one.content}}
            <br/><br/>
            <img style="width: 200px;height: 200px" v-if="one.image != null && one.image?.trim() !== ''" class="i1" :src="one.image">
            <ol type="A">
                <li v-for="a in one.items.split(';')"><input type="checkbox" :checked="a.trim().startsWith('$')" disabled>{{a.replace(/^\$/, '')}}</li>
            </ol>
        </div>
        <div v-if="one.type == '判断题'">
            {{one.content}}
            <br/><br/>
            <img style="width: 200px;height: 200px" v-if="one.image != null && one.image?.trim() !== ''" class="i1" :src="one.image">
            <ol type="A">
                <li><input type="checkbox" disabled :checked="one.items == 'true'">对</li>
                <li><input type="checkbox" disabled :checked="one.items == 'false'">错</li>
            </ol>
        </div>
        <div v-if="one.type == '问答题'">
            {{one.content}}
            <br/><br/>
            <img style="width: 200px;height: 200px" v-if="one.image != null && one.image?.trim() !== ''" class="i1" :src="one.image">
        </div>
        <div>
            解析思路：{{one.ideas}}
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="qus = false">取 消</el-button>
        </div>
    </el-dialog>


</div>
<script src="../../js/vue.js"></script>
<script src="../js/index.js"></script>
<script src="../../js/axios.js"></script>
<script src="../../js/qs.js"></script>
<script>
let app = new Vue({
	el: '#app',
	data: {
		assessone:{
			id: '',
            content: '',
            types: '-1',
            status: '2',
            tname: '',
			value1: '',//时间
			start:"",//开始时间
		    end: "",//结束时间
		},
		restaurants: [],//关键字提醒
		searchone:[],//存取搜索数据
		currentPage4: 1,	//当前所在的页
	      total:0,			//总数
	      pagesize:10,		//每页数量
        type: [],
        assess: [],
        allpname:[],
        qus: false,
        one: {},
	},
	methods: {
		//条件查询
		byassess(val){
			//存取临时变量
			this.currentPage4 = val;
			this.searchone = this.assessone;
            let p = new URLSearchParams();
            p.append("currentPage4",this.currentPage4);
            p.append("pagesize",this.pagesize);
            p.append("id",this.searchone.id);
            p.append("content",this.searchone.content);
            p.append("status",this.searchone.status);
            p.append("types",this.searchone.types);
            p.append("start",this.searchone.start);
            p.append("end",this.searchone.end);
            if(this.searchone.tname !== ''){
                p.append("tname",this.type.find(type=> type.tname == this.searchone.tname).id);
            }else{
                p.append("tname", '');
            }
			axios.post("../../cloud-other/review/getreview", p).then(resp=>{
				this.assess = resp.data;
	    		this.total = this.assess.total;
			});
		},
        //获取类别
        getType(){
            axios.get("../../cloud-other/type/getType").then(resp=>{
                this.type = resp.data.data;
                this.byassess(1);
                this.type.forEach(item => {
                    item.value = item.tname;
                });
                this.restaurants = this.type;
            });
        },
        //提示
        querySearch1(queryString, cb) {
            var allpname = this.allpname;
            var results = queryString ? allpname.filter(this.createFilter(queryString)) : allpname;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        //返回输入建议的方法，也就是说输入框一获取焦点。就会自动调用该方法拿到数据，这些数据就是输入建议的数据
        querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        gettime(value1) {
            //定义开始结束时间
            if (value1 != null) {
                this.search.start = value1[0];
                this.search.end = value1[1];
            }else{
                this.search.start ='';
                this.search.end ='';
            }
        },
        //每页展示数据条数的调整
        handleSizeChange(val) {
            //变化每页值的数量
            this.pagesize = val;
            this.byassess(1);
        },
        //控制页面的跳转
        handleCurrentChange(val) {
            this.byassess(val);
        },
        formatTimestamp(timestamp) {
            const date = new Date(timestamp);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        open(obj){
            this.qus = true;
            this.one = obj;
        },
        //同意
        took(obj){
            axios.post("../../cloud-other/review/took", obj).then(res=>{
                this.$message(res.data.msg);
                this.byassess(this.currentPage4);
            });
        },
        //拒绝
        tono(obj){
            axios.get("../../cloud-other/review/tono?rid=" + obj.id).then(res=>{
                this.$message(res.data.msg);
                this.byassess(this.currentPage4);
            });
        }
	},
	created(){
        this.getType();
	},
    computed: {
        // 计算属性来格式化正确答案
        formattedCorrectAnswers() {
            if (!this.one.items) return ''; // 如果没有items，则返回空字符串
            const answers = this.one.items.split(';'); // 使用分号分割字符串
            if (answers.length === 1) {
                // 如果只有一个答案，直接返回
                return answers[0];
            } else {
                // 如果有多个答案，将分号替换为、并返回
                return answers.join('、');
            }
        }
    },
	mounted(){
	}
});
</script>
</body>
</html>